<!--processed-->
<link rel="stylesheet" href="/src/component/date/datepicker.css">
<link rel="stylesheet" href="/views/resolution/statistics/site/tmp.css">
<section id="site">
    <div class="breadcrumb">
        <i class="back iconfont icon-fanhui1" id="back"></i>
        <span>Resolution</span>
        <span class="interval">/</span>
        <span>Statistics</span>
    </div>
    <div class="layout-processed feat-grid">
        <form id="form" action="" class="header">
            <div class="header-sort fx-row-s">
                <div data-val="" class="sort-list ml30 active-sort"><a href="#resolution/statistics/site">Paypal投诉量统计</a></div>
                <div data-val="" class="sort-list ml30"><a href="#resolution/statistics/reply">员工回复统计</a></div>
                <div data-val="" class="sort-list ml30"><a href="#resolution/statistics/same">新增量统计</a></div>
            </div>
            <div class="clearfix fx-row-s">
                <div class="header-item w12 fl ml30">
                    <section data-name="departmentName" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="选择事业部"/>
                            <input name="department_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul id="departmentName" class="sel-content">
                            <!--事业部填充-->
                        </ul>
                    </section>
                </div>
                <div class="header-item w12 fl ml30">
                    <section data-name="accountName" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="选择账号名称"/>
                            <input name="merchant_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul id="accountName" class="sel-content">
                            <!--事业部账号填充-->
                        </ul>
                    </section>
                </div>
                <!--<div class="header-item w12 fl ml30">
                    <section data-name="siteName" class="com-select">
                        <div class="sel-item">
                            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="选择站点名称"/>
                            <input name="erp_site_id" type="hidden" value="">
                            <i class="sel-icon"></i>
                        </div>
                        <ul id="siteName" class="sel-content">
                            &lt;!&ndash;事业部站点填充&ndash;&gt;
                        </ul>
                    </section>
                </div>-->

                <div class="header-item ml30">
                    <button id="trash" type="button" class="btn-b hide">清空</button>
                    <button id="check" class="btn-e ml10" type="button">筛选</button>
                </div>
            </div>
        </form>
        <div class="data-box com-check">
            <table class="table-a table-fixed">
                <thead class="t-head">
                <tr>
                    <th class="tc">序号</th>
                    <th>事业部</th>
                    <th>账号</th>
                    <!--<th>站点</th>-->
                    <th data-name="total_cnt"><span class="total_cnt">投诉总量</span><i class="total_cnt iconfont icon-xialaxuanzeicon"></i></th>
                    <th data-name="undereview_cnt"><span class="undereview_cnt">paypal审核量</span><i class="undereview_cnt iconfont icon-xialaxuanzeicon"></i></th>
                    <th data-name="inquiry_cnt"><span class="inquiry_cnt">剩余待回复dispute量</span><i class="inquiry_cnt iconfont icon-xialaxuanzeicon"></i></th>
                    <th data-name="claim_cnt"><span class="claim_cnt">剩余待回复claim量</span><i class="claim_cnt iconfont icon-xialaxuanzeicon"></i></th>
                    <th data-name="chargeback_cnt"><span class="chargeback_cnt">剩余待回复chargeback量</span><i class="chargeback_cnt iconfont icon-xialaxuanzeicon"></i></th>
                    <th data-name="all_case_cnt"><span class="all_case_cnt">剩余待回复总量</span><i class="all_case_cnt iconfont icon-xialaxuanzeicon"></i></th>
                </tr>
                <tr class="thead-fixed" data-name="siteDataTotal">

                </tr>
                </thead>
                <!--<tbody class="total-style" data-name="siteDataTotal"></tbody>-->
                <tbody data-name="siteData">

                </tbody>
            </table>
        </div>

    </div>

    <footer class="footer fx-row-b">
        <div>
            <span>Showing <span id="page-start">1</span> to <span id="page-end">20</span> of <span id="page-total">0</span> entries</span>
            <select name="page">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span>records per page</span>
        </div>
        <section id="box-page"></section>
    </footer>
</section>

<!--渲染模板开始-->

<!--事业部列表-->
<script id="statistics-site-list" type="text/html">
    {{each data as v i}}
    <li data-val="{{v.id}}" class="sel-list">{{v.department_name}}</li>
    {{/each}}
</script>

<!--事业部-账号列表-->
<script id="statistics-site-account" type="text/html">
    <li data-val="0" class="sel-list">全部</li>
    {{each data as v i}}
    <li data-val="{{v.pp_merchant_id}}" class="sel-list">{{v.pp_account_email}}</li>
    {{/each}}
</script>

<!--事业部-站点列表-->
<script id="statistics-site-point" type="text/html">
    <li data-val="0" class="sel-list">全部</li>
    {{each data as v i}}
    <li data-val="{{v.site_id}}" class="sel-list">{{v.ShortName}}</li>
    {{/each}}
</script>


<!--list data-->
<script id="site-data" type="text/html">

    {{each detail as v i}}
        <tr class="nth">
            <td class="tc"><span>{{i + $imports.count}}</span></td>
            <td>{{v.department_name}}</td>
            <td>{{v.pp_account_email}}</td>
            <!--<td>{{v.site_name}}</td>-->
            <td>{{v.total_cnt}}</td>
            <td>{{v.undereview_cnt}}</td>
            <td>{{v.inquiry_cnt}}</td>
            <td>{{v.claim_cnt}}</td>
            <td>{{v.chargeback_cnt}}</td>
            <td>{{v.all_case_cnt}}</td>
        </tr>
    {{/each}}

</script>

<!--list data total-->
<script id="site-data-total" type="text/html">

        <td>合计(数量)</td>
        <td>{{department_cnt}}</td>
        <td>{{merchant_cnt}}</td>
        <td>{{site_cnt}}</td>
        <td class="a-type">{{case_cnt}}</td>
        <td class="a-type">{{under_review_cnt}}</td>
        <td class="a-type">{{inquiry_cnt}}</td>
        <td class="a-type">{{claim_cnt}}</td>
        <td class="a-type">{{chargeback_cnt}}</td>
        <td class="a-type">{{left_reply_cnt}}</td>

</script>


<!-- js -->
<script>

    $.extend(window.p,{
        page:1,
        num:20,
        total:0,
        pageObj:null,
        merchant_id:com.getCookie("merchant_id") ? com.getCookie("merchant_id") : null,
        increment:$("#increment").comCheck(),
        data:{
            total_cnt:'desc',
            undereview_cnt:'asc',
            inquiry_cnt:'asc',
            claim_cnt:'asc',
            chargeback_cnt:'asc',
            all_case_cnt:'asc',

            order: '',
            sort: ''
        },
        isTrue:{
            a:false,
            b:true,
        },
        siteObj:null,
        accountObj:null,
        initList:true,
    });

    $(function(){

        init();

        function init(){

            if(com.getCookie('pageNum')) {
                p.num = com.getCookie("pageNum");
            }

            //默认分页显示
            $("select[name='page']").val(p.num);
            //返回
            $(".back").click(function(){
                window.history.go(-1);
            });

            //初始化分页
            initPage();

            //选择分页事件
            $("select[name='page']").on('change',function(){
                var val = $(this).val();
                com.setCookie('pageNum',val,720);
                p.num = val;
                request();
            });

            //初始化对应账号名
            p.accountObj = $("[data-name='accountName']").comSelect({
                init:true,
                search:true,
                callback:function(val,text){}
            });
            //初始化对应站点
            /*p.siteObj = $("[data-name='siteName']").comSelect({
                init:true,
                search:true,
                callback:function(val,text){}
            });*/


            //排序事件
            $(".total_cnt").on('click',function(){
                sortTrigger($(this))
            });
            $(".undereview_cnt").on('click',function(){
                sortTrigger($(this))
            });
            $(".inquiry_cnt").on('click',function(){
                sortTrigger($(this))
            });
            $(".claim_cnt").on('click',function(){
                sortTrigger($(this))
            });
            $(".chargeback_cnt").on('click',function(){
                sortTrigger($(this))
            });
            $(".all_case_cnt").on('click',function(){
                sortTrigger($(this))
            });


            //默认请求事业部
            requestDivision();


            $("#check").on('click',function(){
                request('init');
            })

            //自动偏移thead
            /*$(".data-box").scroll(function(){
                var top = $(this).scrollTop();
                var theadObj = $(this).find('thead');
                if(top > 1){
                    theadObj.css({'transform':'translateY('+ top +'px)'});
                } else{
                    theadObj.css({'transform':'translateY(0px)'});
                }
            })*/
        }


        function initPage(){
            p.pageObj = $("#box-page").comPage({
                total:p.total,
                pages:p.num,
                callback:function(page){
                    p.page = page;
                    request();
                }
            });
        }

        function renderLeftPage(){
            $("#page-total").html(p.total);
            $("#page-start").html((p.page-1)*p.num + 1);
            if(p.page === 1){
                $("#page-end").html(p.num);
            }else if(p.page == Math.ceil(p.total/p.num)) {
                $("#page-end").html(p.total);
            }else{
                $("#page-end").html(p.page*p.num);
            }
        }

        //默认请求事业部
        function requestDivision(){
            app.ajax({
                type:'get',
                url:app.api('/api/getDepartments/'),
                data:{},
                success:function(res){
                    if(res.code == 0){
                        console.log(res)
                        var listTmp = template('statistics-site-list', res);
                        $("#departmentName").html(listTmp);

                        $("[data-name='departmentName']").comSelect({
                            init:true,
                            callback:function(val,text){
                                requestMapping(val);
                                //requestSite(val);
                            }
                        });

                        requestMapping(res.data[0].id);
                        //requestSite(res.data[0].id);
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            });
        }

        //默认请求事业部账号名
        function requestMapping(val){

            app.ajax({
                type:'get',
                url:app.api('/api/getPaypalAccount/'+ val),
                data:{},
                success:function(res){
                    if(res.code == 0){
                        console.log(res)
                        var listTmp = template('statistics-site-account', res);
                        $("#accountName").html(listTmp);

                        p.accountObj.init();
                        p.isTrue.a = true;
                        isReady();
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                },
            });
        }

        //默认请求事业部对应的站点名
        function requestSite(val){

            app.ajax({
                type:'get',
                url:app.api('/api/getDPSites/'+ val),
                data:{},
                success:function(res){
                    if(res.code == 0){
                        console.log(res)
                        var listTmp = template('statistics-site-point', res);
                        $("#siteName").html(listTmp);

                        p.siteObj.init();
                        p.isTrue.b = true;
                        isReady();
                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                    }
                }
            });
        }


        //请求列表
        function request(init){

            init && (p.page = 1);

            var loadObj = null;
            app.ajax({
                type:'post',
                url:app.api('/api/disputesSts'),
                data:getPara(),
                beforeSend:function(){
                    loadObj = $.load({insert:$(".layout-processed"),});
                    $('footer').removeClass('hide')
                },
                success:function(res){
                    template.defaults.imports.count = (p.page-1)*p.num + 1;
                    if(res.code == 0){
                        var tmp = template('site-data', res.data);
                        $("[data-name='siteData']").html(tmp);

                        var tmpTotal = template('site-data-total',res.data.combine);
                        $("[data-name='siteDataTotal']").html(tmpTotal);

                        if(!res.data.detail.length){
                            $.comMessage({
                                type:'warning',
                                text:'暂无详情数据',
                            });
                        }

                        p.total = res.data.total_cnt;

                        if(init){
                            p.pageObj.setPage(p.total,p.num,1);
                        }else{
                            p.pageObj.setPage(p.total,p.num);
                        }
                        renderLeftPage();

                    }else{
                        $.comMessage({
                            type:'warning',
                            text:res.msg,
                        });
                        $("[data-name='siteData']").html('');
                        $("[data-name='siteDataTotal']").html('');
                        $('footer').addClass('hide')
                    }
                },
                complete:function(){
                    loadObj.close()
                }
            });
        }

        //获取列表参数
        function getPara(){
            $.each($("#form").serializeArray(),function(index,item){
                p.data[item.name] = item.value ;
            });

            //p.data.account_id = p.data.account_id || para.user.account_ids[0] || "";
            p.data.page = p.page;
            p.data.page_nums = p.num;
            return p.data;
        }

        function isReady(){
            if(p.isTrue.a && p.isTrue.b && p.initList){
                request('init')
                p.initList = false;
            }
        }

        //排序筛选
        function sortTrigger(obj){
            var name = obj.closest('th').attr('data-name');
            p.data[name] == 'asc' ? p.data[name] = 'desc' : p.data[name] = 'asc';
            p.data.sort = p.data[name];
            p.data.order = name;
            request();
        }

    })


</script>